<template>
  <div class="header-container">
    <nav-bar :title="'商品详情'" :showLeftArrow="true" :leftText="'返回'" @click-left="back"></nav-bar>
  </div>
  <div class="main-container">
    <div class="detail-content">
      <div class="detail-swipe-wrap">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <van-image :src="product.imgUrl" style="width: 100%"></van-image>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="product-info">
        <div class="product-title">
          {{ product.name || "" }}
        </div>
        <div class="product-desc">免邮费 顺丰快递</div>
        <div class="product-price">
          <span>¥{{ product.price || "" }}</span>
        </div>
      </div>
      <div class="product-intro">
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <div class="product-content" v-html="product.detail || ''"></div>
      </div>
    </div>
  </div>
  <div class="footer-container">
    <van-action-bar>
      <van-action-bar-button type="warning" text="加入购物车" @click="addCartItem" />
      <van-action-bar-button type="danger" text="立即购买" @click="createOrder" />
    </van-action-bar>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import NavBar from "@/components/NavBar.vue";
import { useRoute, useRouter } from "vue-router";
import PmsProduct from "@/entity/PmsProduct";
import productService from "@/services/product.service";
import { AxiosError } from "axios";
import { Toast } from "vant";
import cartItemService from "@/services/cart-item.service";
import OmsCartItemCreationParam from "@/entity/OmsCartItemCreationParam";
import OmsCartItem from "@/entity/OmsCartItem";
import OmsOrderType from "@/entity/OmsOrderType";

type StateType = {
  id?: number | null;
  product?: PmsProduct | null;
};

export default defineComponent({
  components: {
    NavBar,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive<StateType>({
      id: undefined,
      product: new PmsProduct(),
    });

    onMounted(async () => {
      state.id = Number(route.query.id);
      await load();
    });

    const load = async () => {
      try {
        if (state.id == null) {
          return;
        }
        const p = await productService.retrieve(state.id);

        state.product = p;
      } catch (e) {
        if (e instanceof AxiosError && e.response?.status == 401) {
          Toast.fail("请先登录");
          router.push("/login");
          return;
        }
        Toast.fail("加载失败");
        throw e;
      } finally {
      }
    };

    const back = () => {
      router.back();
    };

    const addCartItem = async () => {
      try {
        const param: OmsCartItemCreationParam = {
          productId: state.product?.id,
          quantity: 1,
        };
        await cartItemService.createOrUpdate(param);
        Toast.success("购物车添加成功");
      } catch (e) {
        if (e instanceof AxiosError && e.response?.status == 401) {
          Toast.fail("请先登录");
          router.push("/login");
          return;
        }
        Toast.fail("加载失败");
        throw e;
      } finally {
      }
    };

    const createOrder = async () => {
      const cartItem = new OmsCartItem();
      cartItem.productId = state.product?.id;
      cartItem.productName = state.product?.name;
      cartItem.productImgUrl = state.product?.imgUrl;
      cartItem.price = state.product?.price;
      cartItem.quantity = 1;

      router.push({
        path: "/order-preview",
        query: {
          orderType: OmsOrderType.DIRECTLY,
          cartItems: JSON.stringify([cartItem]),
        },
      });
    };

    return {
      ...toRefs(state),
      back,
      addCartItem,
      createOrder,
    };
  },
});
</script>

<style scoped>
.boxSizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.detail-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #252525;
  background: #fff;
  border-bottom: 1px solid #dcdcdc;
}

.detail-header .product-name {
  font-size: 14px;
}

.detail-content {
  overflow: hidden;
  overflow-y: auto;
}

.product-detail .detail-content .detail-swipe-wrap .my-swipe .van-swipe-item img {
  width: 100%;
}

.detail-content .product-info {
  padding: 0 10px;
}

.detail-content .product-info .product-title {
  font-size: 18px;
  text-align: left;
  color: #333;
}

.detail-content .product-info .product-desc {
  font-size: 14px;
  text-align: left;
  color: #999;
  padding: 5px 0;
}

.detail-content .product-info .product-price {
  display: flex;
  justify-content: space-between;
}

.detail-content .product-info .product-price span:nth-child(1) {
  color: #f63515;
  font-size: 22px;
}

.detail-content .product-info .product-price span:nth-child(2) {
  color: #999;
  font-size: 16px;
}

.detail-content .product-intro {
  width: 100%;
  padding-bottom: 50px;
}

.detail-content .product-intro ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 10px 0;
}

.detail-content .product-intro ul li {
  flex: 1;
  padding: 5px 0;
  text-align: center;
  font-size: 15px;
  border-right: 1px solid #999;
  box-sizing: border-box;
}

.detail-content .product-intro ul li:last-child {
  border-right: none;
}

.detail-content .product-intro .product-content {
  padding: 0 20px;
}

.detail-content .product-intro .product-content img {
  width: 100%;
}
</style>
